<style>
    body{
        background-color: cornsilk;
        color: dodgerblue;
        font-family: 'Noto Sans SC', sans-serif;
        width: 680px;
        padding: 2rem;
        font-size: 0;
    }
    h2{
        text-align: center;
        font-size: 24px;
    }
    h3{
        text-align: center;
        font-size: 20px;
        margin-bottom: 0.25rem;
    }
    span.b{
        font-weight: bold;
    }
    p.desc{
        margin-top: 0.5rem;
        margin-bottom: 1.6rem;
        text-align: center;
        font-size: 16px;
    }
    p.tips{
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
        text-align: left;
        font-size: 16px;
    }
    div#img-box{
        width: 100%;
        height: 340;
        display: block;
        text-align: center;
    }
    div#img-box img{
        max-height: 100%;
        margin: auto;
    }
    .price-table:last-of-type{
        border-bottom: none !important;
    }
    .price-table:nth-of-type(2n){
        border-right: cornflowerblue solid 2px;
    }
    .price-table{
        border-bottom: cornflowerblue solid 2px;
        display: inline-block;
        width: 49%;
        height: 160px;
    }
    .price-table table{
        display: block;
        border-collapse: collapse;
        border-spacing: 0; 
    }
    .price-table th{
        margin-bottom: 1rem;
    }
    .price-table table > tbody > tr > td:first-of-type{
        width: 6rem;
    }
    .price-table table > tbody > tr > td:nth-of-type(2){
        width: 5.8rem;
    }
    .price-table table > tbody > tr > td:nth-of-type(3){
        width: 3rem;
    }
    .price-table table > tbody > tr > td:nth-of-type(4){
        width: 7rem;
    }
    td{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
    }
</style>
<div id="template">
    <h2>咕Bot - 物价查询</h2>
    <div id="img-box">
        <img src="{{ info.image }}?imageView/1/w/640/h/340" alt="外观图片">
    </div>
    <h3>{{ info.name }} ({{ info.alias }})</h3>
    <p class="desc">{{ info.desc }}</p>
    <% for(var i = 0; i < data.length; i++) { %>
        <div class="price-table">
            <table>
                <thead>
                    <tr><th colspan="4">{{ data[i].region }}报价</th></tr>
                </thead>
                <tbody>
                    {{if data[i].data.length < 1}}
                        <!-- because i cannot make it alignment. I make this invisible tr :( -->
                        <tr style="color: cornsilk">
                            <td>2000-00-00</td>
                            <td>唯满侠</td>
                            <td>16500</td>
                            <td>收了</td>
                        </tr>
                        <tr>
                            <td colspan="4">暂无报价</td>
                        </tr>
                    {{else}}
                    <% for(var j = 0; j < data[i].data.length; j++) { %>
                        <tr>
                            <td>{{data[i].data[j].date}}</td>
                            <td>{{data[i].data[j].server}}</td>
                            <td>{{data[i].data[j].price}}</td>
                            <td>{{data[i].data[j].saleCode}}</td>
                        </tr>
                    <% } %>
                    {{/if}}
                </tbody>
            </table>
        </div>
    <% } %>
    <p class="tips">
        数据获取时间：{{timestamps}}
    </p>
    <p class="tips">
        数据来源：<span class="b">剑网三物价君小小黑 小程序</span>
    </p>
    <p class="tips">
        如果你收了或者出了外观不妨去<span class="b">小程序</span>报价提供数据供他人参考吧！
    </p>
    <p class="tips">
        本机器人是开源免费的机器人，有需要请加群<span class="b">116523057</span>获取
    </p>
</div>
